<template>
  <!-- temeplate是放html的 -->
  <div id="app">
    <!-- {{ aaa }} -->
    <!-- <div @click="addFn">点我甲乙</div>
    <span v-for="(item,index) in arr" :key="index" @click="changeIndex(index)" :class="{'active':index==ind}">{{item.tit}}</span>
    <div>{{arr[ind].con}}</div> -->

    <!-- v-model是vue的双向数据绑定 -->
    <div>
      全选： <input type="checkbox" v-model="checkAll" @change="checkallfn" />
      <span>{{ checkAll }}</span>
    </div>
    <div v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.checked" @change="checkfn" />
      <span>{{ item.checked }}</span>
      <span>名称：{{ item.tit }}</span>
      <span>价格：{{ item.price }}</span>
      <button @click="del(index)">-</button>
      <span>{{ item.count }}</span>
      <button @click="add(index)">+</button>
    </div>
    <div>总个数：{{ allCount }}</div>
    <div>总价：{{ totalPrice }}</div>

    <div v-xs="false">我是div</div>
    <!-- ------------ -->
    <Son></Son>
  </div>
</template>

<style lang="scss">
// style是放css的
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.active {
  color: red;
}
</style>
<script>
import Son from "./views/son.vue";
// 这里面是放js的
export default {
  provide () {
    return {
      app: this
    }
  },
  components: {
    Son,
  },
  data() {
    return {
      aaa: "1909a",
      arr: [
        {
          tit: "标题1",
          con: "内容1",
        },
        {
          tit: "标题2",
          con: "内容2",
        },
        {
          tit: "标题3",
          con: "内容3",
        },
      ],
      ind: 0,
      ipt: "",
      // 购物车数据
      list: [
        {
          tit: "篮球",
          price: 100,
          count: 0,
          checked: false,
        },
        {
          tit: "足球",
          price: 200,
          count: 0,
          checked: false,
        },
        {
          tit: "乒乓球",
          price: 50,
          count: 0,
          checked: false,
        },
      ],
      checkAll: false,
    };
  },
  methods: {
    addFn() {},
    changeIndex(ind) {
      console.log(ind);
      this.ind = ind;
    },
    // 购物车的加法
    add(index) {
      this.list[index].count++;
    },
    // 购物车的减法
    del(index) {
      this.list[index].count--;
      if (this.list[index].count < 0) {
        this.list[index].count = 0;
      }
    },
    // 购物车全选方法
    checkallfn() {
      this.list.map((item, index) => {
        return (item.checked = this.checkAll);
      });
    },
    // 购物车反选的方法
    checkfn() {
      this.checkAll = this.list.every((item) => {
        return item.checked;
      });
    },
  },

  computed: {
    // 求总个数
    allCount() {
      return this.list.reduce((a, b) => {
        return a + (b.checked ? b.count : 0);
      }, 0);
    },
    // 求总价的函数
    totalPrice() {
      return this.list.reduce((a, b) => {
        return a + (b.checked ? b.count * b.price : 0);
      }, 0);
    },
  },
  directives: {
    xs: {
      // 指令的定义
      inserted: function (el, binding) {
        console.log(el, binding.value);
        if (binding.value === true) {
          el.style.display = "block";
        } else {
          el.style.display = "none";
        }
      },
    },
  },
};
</script>
